<!-- src/components/CollapsiblePanel.vue -->
<template>
  <a-collapse accordion :bordered="false" v-model:activeKey="activeKey">
    <a-collapse-panel
        v-for="item in currentPageData"
        :key="item.id"
    >
      <template #header>
        业务名称：<a-tag color="blue">{{ item.name }}</a-tag>
        规划结果：<a-tag :color="item.result === '找不到保护路由' ? 'red' : 'orange'">{{ item.result }}</a-tag>
        首尾节点：<a-tag color="green">{{ item.demandHead +"-" +item.demandTail}}</a-tag>
        保护方式：<a-tag color="purple">{{ item.protect || '无' }}</a-tag>
      </template>
      <div class="network-container">
        <div class="network-section">
          <div class="network-content">
            <div class="network-label">
              <a-tag color="darkgray">网络1</a-tag>
            </div>
            <div class="route-info">
              <div class="route-item">
                <span class="route-label">
                  <a-tag color="yellow">工作路由</a-tag>
                </span>
                <span class="route-content">{{ item.workRoute }}</span>
              </div>
              <div class="route-item">
                <span class="route-label">
                  <a-tag color="red">保护路由</a-tag>
                </span>
                <span class="route-content">{{ item.protectRoute }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="network-section">
          <div class="network-content">
            <div class="network-label">
              <a-tag color="darkgray">网络2</a-tag>
            </div>
            <div class="route-info">
              <div class="route-item">
                <span class="route-label">
                  <a-tag color="yellow">工作路由</a-tag>
                </span>
                <span class="route-content">{{ item.doubleRouteFibers }}</span>
              </div>
              <div class="route-item">
                <span class="route-label">
                  <a-tag color="red">保护路由</a-tag>
                </span>
                <span class="route-content">{{ item.doubleProtectRouteFibers }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-collapse-panel>
  </a-collapse>
  <a-pagination
      style="position: absolute; bottom: 10px; right: 10px"
      :current="currentPage"
      :total="dataList.length"
      :page-size="pageSize"
      @change="handlePageChange"
  />
</template>

<script setup lang="ts">
import { ref, computed, defineProps, watch } from 'vue';
import type { PropType } from 'vue';
import { Collapse, Pagination } from 'ant-design-vue';
import useDemand from "../store/demand.js";

const { Panel } = Collapse;
const demandStore = useDemand();

interface DemandItem {
  id: string;
  name: string;
  result: string;
  demandHead: string;
  demandTail: string;
  protect: string;
  workRoute: string;
  protectRoute: string;
  doubleRouteFibers: string;
  doubleProtectRouteFibers: string;
}

const props = defineProps({
  dataList: {
    type: Array as PropType<DemandItem[]>,
    required: true
  },
  pageSize: {
    type: Number,
    default: 10
  }
});

const currentPage = ref(1);
const activeKey = ref<string[]>([]);

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * props.pageSize;
  const end = start + props.pageSize;
  return props.dataList.slice(start, end);
});

const handlePageChange = (page: number) => {
  currentPage.value = page;
};

watch(() => props.dataList, () => {
  currentPage.value = 1;
});

watch(activeKey, (newActiveKey) => {
  if (newActiveKey && newActiveKey.length > 0) {
    const selectedItem = props.dataList.find(item => item.id === newActiveKey[0]);
    if (selectedItem) {
      demandStore.selectDemand(selectedItem);
    }
  }
});
</script>

<style scoped>
.ant-collapse-header {
  cursor: pointer;
}

.network-container {
  padding: 0 8px;
}

.network-section {
  margin-bottom: 2px;
}

.network-content {
  display: flex;
  align-items: flex-start;
  padding: 2px 0;
  padding-left: 22px;
}

.network-label {
  flex-shrink: 0;
  width: 50px;
  margin-right: 12px;
}

.route-info {
  flex: 1;
}

.route-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4px;
}

.route-label {
  flex-shrink: 0;
  width: 80px;
  margin-right: 8px;
}

.route-content {
  flex: 1;
  word-break: break-all;
  line-height: 24px;

}

:deep(.ant-collapse-content-box) {
  padding: 8px !important;
}

:deep(.ant-tag) {
  margin: 0;
  line-height: 18px;
}
</style>
